
class ITablet extends IOC.Component {
    constructor(props) {
        super(props)
        this.state = {
            tablist: [],
            current: null,
            currentIndex: null
        }
        let fn = this.removeIndex.bind(this)
        this.$on(props.id + "_close", fn)
    }
    componentDidMount() {
        // console.log("will mount")
        let ar1 = []
        React.Children.forEach(this.props.children, (child, index) => {
            let obj = {
                type: 'el',
                element: child,
                key: child.props.tabkey || "tkey" + index,
                tablabel: child.props.tablabel || "tkey"+index,
            }
            ar1.push(obj)
        })
        if(this.props.tabs){
             ar1.concat(this.props.tabs)
        }
       
        this.setState({
            tablist: ar1,
            current: ar1.length>0?ar1[0].key:undefined,
            currentIndex: 0
        })
    }

    switchIndex(index) {
        if (index >= 0 && index < this.state.tablist.length) {
            let key = this.state.tablist[index].key;
            this.setState({
                currentIndex: index,
                current: key
            })
        }
    }

    switchKey(key) {
        this.state.tablist.forEach((it, index) => {
            if (key == it.key) {
                this.setState({
                    current: key,
                    currentIndex: index
                })
            }
        })
    }

    append(tabdefinition) {
        let list = this.state.tablist;
        let index = this.state.tablist.length;
        let nothas = true
        this.state.tablist.forEach((it1, idx)=>{
            if(it1.tablabel == tabdefinition.tablabel){
                    nothas = false;
                    this.switchIndex(idx)
            }
        })

        if(nothas){

            list.push(tabdefinition);
            this.setState({
                tablist: list,
                current: tabdefinition.key,
                currentIndex: index
            })

        }
   
    }
    
    addIframe2(e){
        
         var c = document.getElementById("imainframe-content")
         if(c){
             console.log("addifrma2", c.clientHeight)
             e.target.height = c.clientHeight - 50
         } 
    }
    
    appendDelay(tabdefinition){
        let def = tabdefinition
        InvokeQueue.instance.delay(500, ()=>{this.append(def)})
    }

    removeIndex(index) {
        if (index >= 0 && index < this.state.tablist.length) {
            let list = this.state.tablist.filter((it1, idx) => {
                return idx != index
            })
            let curr = this.state.current
            let currIndex = this.state.currentIndex
            if (index == currIndex) {
                if (index > 0) {
                    curr = list[index - 1].key
                    currIndex = index - 1
                } else {
                    if (list.length > 0) {
                        curr = list[0].key
                        currIndex = 0
                    } else {
                        curr = undefined
                        currIndex = -1
                    }
                }
            }else if( index < currIndex){
                currIndex = currIndex -1
            }
            this.setState({
                tablist: list,
                current: curr,
                currentIndex: currIndex
            })
        }
    }

    removeKey(key) {
        let index = -1;
        this.state.tablist.forEach((it1, idx) => {
            if (it1.key == key) {
                index = idx
            }
        })
        if (index >= 0) {
            this.removeIndex(index)
        }
    }

    render() {
            let current = this.state.current;
            return ( < div className = "itablet" >
            
                        <div className="itablet-head">
                            <ul>
                                {this.state.tablist.map((item1, index)=>{
                                      let select=false
                                      if(index == this.state.currentIndex){
                                          select=true
                                      }
                                      let name = item1.tablabel || item1.key
                                      return (<li className={select?"select":''}  key={item1.key}>
                                                <a href="#" onClick={()=>{this.switchIndex(index)}}> {name}  
                                                </a> <a href="#" className="closed" onClick={()=>this.removeIndex(index)} >x</a>  </li>)
                                })}
                            </ul>
                        </div>

                    {
                        this.state.tablist.map((item1, index) => {
                                let type = item1.type
                                let style = {
                                    display: 'none'
                                }
                                if (current == item1.key) {
                                    style = {
                                        display: 'block'
                                    }
                                }
                                if (type == 'el') {
                                    return ( < div key = {item1.key} tabkey = {item1.key} style = {style} > {item1.element} </div>)
                                    }

                                if (type == 'url') {
                                    return ( < div key = {item1.key} tabkey = {item1.key} style = {style} >
                                             <iframe id = {item1.key} className="itablet-iframe" src = {item1.url} width = '100%' onLoad = {addIframe} height="100" frameBorder = "0" > < /iframe> 
                                        </div>)
                                    }
                            })
                    } 
                    </div>)
                }
}


